<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
    #signatureparent {
        color: black;
        background-color: darkgrey;
        /*max-width:600px;*/
        padding: 10px;
        width: auto;
    }

    #signature {
        border: 2px dotted black;
        background-color: lightcyan;
        height: 55vh;
        
    }

    html #content {

        width: 60%;
    }
</style>
<div class="container">
    <div id="signatureparent">
        <div id="signature"></div>
    </div>
    <br>
    <button type="button" class="btn btn-primary btn-block" id="save" style="font-size:4em">保存</button>
    <button type="button" class="btn btn-default btn-block" id="clear" style="font-size:4em">清除</button>
</div>
<div id="img">
</div>
<script src="./libs/jquery.js"></script>
<script src="./libs/jSignature.js"></script>
 
<script>
    var param = {
        width: '100%',//签名区域的宽
        height: '100%',//签名区域的高
        cssclass: 'zx11',//画布的类 可以写自定义的样式
        UndoButton: true,//撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
        signatureLine: false,//去除默认画布上那条横线
        lineWidth: '1' //画笔的大小
    };
    $("#signature").jSignature(param);
    //jSignature提供了清除的API reset
    $('#clear').click(function () {
        $("#signature").jSignature("reset");
    });
    //提交
    $('#save').click(function () {
        //获取签名生成的图片 默认是png的
        var datapair = $("#signature").jSignature("getData", "image");
        var file = new Image();
        file.src = "data:" + datapair[0] + "," + datapair[1];
        file.image = datapair[1];
        console.log(file);

        console.log(file.src);
        var test_file = convertBase64UrlToBlob(file.src) 
        console.log(test_file);

        $('#img').html(file)

        var formData = new FormData();

        formData.append('file', test_file);

        $.ajax({
            url: "上传地址",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            success: function (data) {
				// 返回结果
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
        });

    });

    /**  
    * 将以base64的图片url数据转换为Blob  
    * @param urlData  
    *            用url方式表示的base64图片数据  
    */
    function convertBase64UrlToBlob(urlData) {

        var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  

        //处理异常,将ascii码小于0的转换为大于0  
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }

        return new Blob([ab], { type: 'image/png' });
    }

</script>